<script setup>
import {useRouter} from "vue-router";

const props = defineProps({
  game: Object
})

// 游戏详情页
const router = useRouter()
const gameDetail = () => {
  router.push(`/store/detail/${props.game.id}`)
}
</script>

<template>
  <div class="game-container" @click="gameDetail">
    <div class="card">
      <div class="game-name ellipsis">{{ game.chineseName }}</div>
      <div class="rate"><span>游戏评分:</span><span>{{ game.rate }}</span></div>
      <div class="category">
        <div>游戏分类:</div>
        <div class="items">
          <span v-for="item in game.category" :key="item">{{ item }}</span>
        </div>
      </div>
      <div class="view">
        <img v-for="item in game.imageView" :key="item" v-img-lazy="item">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.game-container {
  width: 308px;
  min-height: 830px;
  margin: 10px 0;
  padding: 16px;
  background: linear-gradient(to right, $contrastingColor2 5%, $contrastingColor3 95%);

  .card {
    .game-name {
      font-size: 22px;
    }

    .rate {
      margin: 6px 0;
      height: 24px;
      line-height: 24px;
      color: #cccccc;
      background-color: rgba(38, 54, 69, 0.6);
      border-radius: 3px;

      span:first-child {
        padding: 0 4px;
      }

      span:last-child {
        color: $themeColor;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
    }

    .category {
      margin-top: 10px;

      div {
        font-size: 14px;
      }

      .items {
        display: flex;
        flex-wrap: wrap;
      }

      span {
        padding: 2px 4px;
        margin: 4px 0 0 4px;
        font-size: 12px;
        border-radius: 3px;
        background-color: rgba(38, 54, 69, 0.6);
        color: #cccccc;
      }
    }

    .view {
      display: flex;
      flex-direction: column;

      img {
        margin-top: 12px;
        height: 150px;
        object-position: center;
        object-fit: cover;
      }
    }
  }
}
</style>
